<!-- @format -->

<script setup lang="ts">
import { computed, effect, onUnmounted, ref } from 'vue'
import { useNavHome } from '../../composables/useNavHome'
import { useOpen } from '../../composables/useOpen'
import { useUserService } from '../../composables/useUserService'

const { handleBackHome } = useNavHome()
useUserService()

const { list, getRandomItem } = useOpen()
const randomItem = ref()

const currentIndex = ref(0)
const timerId = ref()
const intervalId = ref()
let first = true

const skipVisible = computed(() => {
  return randomItem.value?.skip || false
})

const jumpVisible = computed(() => {
  return randomItem.value?.path || false
})

const imgs = computed(() => {
  return randomItem.value?.imgs || []
})

const currentImgs = computed(() => {
  return imgs.value[currentIndex.value] || ''
})

const bgStyle = computed(() => {
  if (!currentImgs.value) return {}
  return {
    background: `url(${currentImgs.value}) no-repeat center/cover`,
  }
})

const clearAutoJump = () => {
  if (timerId.value) {
    clearTimeout(timerId.value)
    timerId.value = null
  }
  if (intervalId.value) {
    clearInterval(intervalId.value)
    intervalId.value = null
  }
}

const jumpToHome = () => {
  clearAutoJump()
  handleBackHome()
}

const toJump = () => {
  clearAutoJump()
  uni.navigateTo({
    url: randomItem.value?.path,
  })
}

effect(() => {
  if (list.value.length && first) {
    first = false
    randomItem.value = getRandomItem()

    // 如果开启了跳过，设置定时器
    if (skipVisible.value) {
      const duration = randomItem.value?.duration || 3000
      timerId.value = setTimeout(jumpToHome, duration)
    }

    // 如果有多张图片，开启轮播
    if (imgs.value.length > 1) {
      intervalId.value = setInterval(() => {
        currentIndex.value = (currentIndex.value + 1) % imgs.value.length
      }, 1000)
    }
  }
})

// 组件卸载时清理
onUnmounted(() => {
  clearAutoJump()
})
</script>

<template>
  <div class="open-x" :style="{ ...bgStyle }">
    <wd-navbar
      fixed
      safeAreaInsetTop
      :bordered="false"
      custom-style="background: transparent"
      custom-class="transparent-nav"
    >
      <template #left>
        <view v-if="skipVisible" class="skip-btn" @click="jumpToHome">
          跳过
        </view>
      </template>
    </wd-navbar>

    <!-- 广告运营位 -->
    <view class="content-container">
      <view class="title">{{ randomItem?.title }}</view>
      <view class="desc">{{ randomItem?.desc }}</view>
      <view
        v-if="jumpVisible"
        class="jump-btn"
        :class="{ 'has-img': currentImgs }"
        @click="toJump"
      >
        立即前往
      </view>
    </view>
  </div>
</template>

<style scoped>
.open-x {
  min-height: 100vh;
  position: relative;
}

.ad-image {
  width: 100%;
  height: 100%;
}

.skip-btn {
  padding: 10rpx 20rpx;
  background: rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: white;
  border-radius: 40rpx;
  font-size: 24rpx;
  line-height: 1;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.content-container {
  position: absolute;
  top: 44%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  padding: 0 40rpx;

  text-align: center;
}

.title {
  font-size: 48rpx;
  font-weight: bold;
  color: #333;
  display: block;
  margin-bottom: 40rpx;
}

.desc {
  font-size: 28rpx;
  color: #666;
  line-height: 1.6;
  display: block;
  max-width: 80%;
  margin: 0 auto;
}

.jump-btn {
  margin-top: 240rpx;
  padding: 20rpx 40rpx;

  color: #333;
  border-radius: 48rpx;
  display: inline-block;
  font-size: 32rpx;

  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
}

/* 当有背景图片时应用毛玻璃效果 */
.jump-btn.has-img {
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);

  color: white;
}
</style>
